<template>
  <div class="container">
    <a-card class="general-card" :title="$route.meta.locale">
      <table-search
        ref="searchRef"
        :fileds="searchFileds"
        @search="search"
        @reset="search"
      ></table-search>
      <xTable
        v-model:refresh="refresh"
        v-model:selected-keys="selectedKeys"
        :params="params"
        :columns="tableColumns"
        row-key="dictCode"
        :http="{
          list: getListData,
          del: delData,
          exported: dictData,
          closed: () => {
            router.back();
          },
        }"
      >
        <template #operation-default>
          <div class="item">
            <a-button type="outline" @click="editOpen(null)"> 新增 </a-button>
          </div>
          <div class="item">
            <a-button
              type="outline"
              status="success"
              @click="editOpen(selectedKeys)"
            >
              编辑
            </a-button>
          </div>
        </template>

        <template #dictLabel="{ row }">
          <dict-tag
            :options="[{ ...row, label: row.dictLabel }]"
            :value="row.dictValue"
          />
        </template>
        <template #status="{ row }">
          <dict-tag :options="dict.sys_normal_disable" :value="row.status" />
        </template>
        <template #optional="{ row }">
          <a-button
            type="text"
            status="success"
            @click="editOpen(row.dictCode)"
          >
            编辑
          </a-button>
        </template>
      </xTable>
    </a-card>
    <EditModal
      ref="edit"
      :default-value="{
        dictType: route.params.type,
        dictSort: 0,
        listClass: 'default',
        status: defaultStatus,
      }"
      :fields="editFields"
      :http-add="addData"
      :http-edit="updateData"
      :http-get="getData"
      @reload="refresh = true"
    >
    </EditModal>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref, toRaw, onMounted, computed } from 'vue';
  import { addDateRange } from '@/utils/index';
  import {
    getListData,
    getData,
    updateData,
    addData,
    delData,
  } from '@/api/system/dict-data';
  import { dictData } from '@/api/exportFile';
  import { useRoute, useRouter } from 'vue-router';
  import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
  import { Message } from '@arco-design/web-vue';
  import { getDict, getDictTypes } from '@/utils/dict';

  const dictTypes: any = ref([]);
  const initData = async () => {
    dictTypes.value = await getDictTypes(
      {},
      {
        label: 'dictName',
        value: 'dictType',
      }
    );
  };
  initData();
  const route = useRoute();
  const router = useRouter();
  // 定义组件
  const edit = ref();
  const searchRef = ref();
  const dict = getDict('sys_normal_disable');
  const selectedKeys = ref([]);
  // 定义查询字段
  const searchFileds: Array<any> = reactive([
    {
      span: 5,
      field: 'dictType',
      placeholder: '请输入字典名称',
      label: '字典名称',
      tag: 'a-select',
      initValue: route.params.type,
      attrs: {
        options: dictTypes,
      },
    },
    {
      span: 5,
      field: 'dictLabel',
      placeholder: '请输入字典标签',
      label: '字典标签',
      tag: 'a-input',
      initValue: '',
    },
    {
      span: 5,
      field: 'status',
      placeholder: '请选择状态',
      label: '状态',
      initValue: '',
      tag: 'a-select',
      attrs: {
        options: dict.sys_normal_disable,
      },
    },
  ]);
  // 定义表格字段
  const tableColumns: Array<TableColumnData> = reactive([
    {
      dataIndex: 'dictCode',
      title: '字典编码',
    },
    {
      dataIndex: 'dictLabel',
      title: '字典标签',
      slotName: 'dictLabel',
    },
    {
      dataIndex: 'dictValue',
      title: '字典键值',
    },
    {
      dataIndex: 'dictSort',
      title: '字典排序',
    },
    {
      dataIndex: 'status',
      title: '状态',
      slotName: 'status',
    },
    {
      dataIndex: 'remark',
      title: '备注',
    },
    {
      dataIndex: 'createTime',
      title: '创建时间',
    },
    {
      dataIndex: 'optional',
      title: '操作',
      slotName: 'optional',
    },
  ]);
  const editFields: Array<any> = reactive([
    {
      key: 'dictType',
      label: '字典类型',
      placeholder: '请输入字典类型',
      tag: 'a-input',
      attrs: {
        disabled: true,
      },
      decorator: {
        rules: [{ required: false, message: '请输入字典类型' }],
      },
    },
    {
      key: 'dictLabel',
      label: '数据标签',
      placeholder: '请输入数据标签',
      tag: 'a-input',
      decorator: {
        rules: [{ required: true, message: '请输入数据标签' }],
      },
    },
    {
      key: 'dictValue',
      label: '数据键值',
      placeholder: '请输入数据键值',
      tag: 'a-input',
      decorator: {
        rules: [{ required: true, message: '请输入数据键值' }],
      },
    },
    {
      key: 'cssClass',
      label: '样式属性',
      placeholder: '请输入样式属性',
      tag: 'a-input',
      decorator: {
        rules: [{ required: false, message: '请输入样式属性' }],
      },
    },
    {
      key: 'dictSort',
      label: '显示排序',
      placeholder: '请输入显示排序',
      tag: 'a-input-number',
      decorator: {
        rules: [{ required: false, message: '请输入显示排序' }],
      },
    },
    {
      key: 'listClass',
      label: '回显样式',
      placeholder: '请选择回显样式',
      tag: 'a-select',
      decorator: {
        rules: [{ required: false, message: '请选择回显样式' }],
      },
      attrs: {
        options: [
          {
            value: 'default',
            label: '默认',
          },
          {
            value: 'primary',
            label: '主要',
          },
          {
            value: 'success',
            label: '成功',
          },
          {
            value: 'info',
            label: '信息',
          },
          {
            value: 'warning',
            label: '警告',
          },
          {
            value: 'danger',
            label: '危险',
          },
        ],
      },
    },

    {
      key: 'status',
      label: '状态',
      placeholder: '请输选择状态',
      tag: 'a-radio-group',
      decorator: {
        rules: [{ required: false, message: '请输选择状态' }],
      },
      attrs: {
        options: dict.sys_normal_disable,
      },
    },
    {
      key: 'remark',
      label: '备注',
      tag: 'a-textarea',
      decorator: {
        rules: [{ required: false, message: '请输入备注' }],
      },
    },
  ]);
  const refresh = ref(false);
  // 定义表格查询参数
  const params = ref({
    dateRange: [],
    dictName: '',
  });
  const defaultStatus = computed(() => {
    if (dict.sys_normal_disable.value <= 0) {
      return '0';
    }
    const list = toRaw(dict.sys_normal_disable);
    return list.value.find((item: { default: any }) => item.default).value;
  });
  // 定义搜索方法
  const search = (data: any) => {
    params.value = addDateRange(data, data?.dateRange);
    refresh.value = true;
  };

  const editOpen = (keys: any | any[]) => {
    if (Array.isArray(keys) && keys.length === 1) {
      edit.value.show(keys[0]);
    } else if (!Array.isArray(keys)) {
      edit.value.show(keys);
    } else if (Array.isArray(keys) && keys.length < 1) {
      Message.warning('必须选中一条数据');
    } else if (Array.isArray(keys) && keys.length > 1) {
      Message.warning('只能选中一条数据');
    }
  };
  onMounted(() => {
    searchRef.value.search();
  });
</script>

<style scoped lang="less">
  .operation-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 20px;
    .item {
      margin-left: 8px;
    }
  }
  .container {
    // padding: 0 20px 20px 20px;
    .link-type {
      text-decoration: none;
      color: rgb(var(--primary-6));
      border-color: rgb(var(--primary-6));
    }
  }
  :deep(.arco-table-th) {
    &:last-child {
      .arco-table-th-item-title {
        margin-left: 16px;
      }
    }
  }
</style>
